 <template>
  <div class="macroSection">
    <header class="macroHead">
      <span>{{'宏观数据'}}</span>
    </header>
    <div class="dataChart">
      <div @click.stop="gotoMacroMarket" class="contain">
        <div class="chartView" id="macroDataBar"></div>
      </div>
    </div>
  </div>
 </template>
 <script>
 import Echarts from 'echarts';
 //  Echarts没解决显示多个轴，开始描绘点向右偏移，x,y轴颜色；
 export default {
   data () {
     return {
       options: {
         title: {
           text: '',
           textStyle: {
             color: '#fff',
             fontSize: 16
           }
         },
         type: 'bar',
         tooltip: {
           show: true
         },
         grid: {
           left: 65
         },
         xAxis: {
           data: [],
           axisLabel: {
             rotate: 90,
             color: function () {
               return '#fff';
             },
             fontSize: 14
           },
           axisTick: {
             show: false
           }
         },
         yAxis: {
           max: 120000,
           interval: 20000,
           splitLine: {
             lineStyle: {
               color: '#303541'
             }
           },
           axisLabel: {
             color: function () {
               return '#fff';
             },
             fontSize: 14
           },
           axisTick: {
             show: false
           }
         },
         series: {
           type: 'bar',
           data: [],
           barGap: 2,
           barWidth: 5,
           itemStyle: {
             normal: {
               color: function () {
                 return '#e63453';
               }
             }
           }
         }
       }
     };
   },
   beforeMount () {
    //  this.renderMacroData();
     this.reqBeefChartData();
   },
   updated () {
     console.log(this.options);
     this.renderMacroData();
   },
   methods: {
     upChartData (data) {
       this.options.title.text = data.title;
       this.options.xAxis.data = data.xaxisArray;
       this.options.series.data = data.seriesArray;
     },
     renderMacroData () {
       let macroChart = Echarts.init(document.getElementById('macroDataBar'));
       macroChart.setOption(this.options);
     },
     gotoMacroMarket () {
       this.$router.replace('/skclient/macroIndex');
     },
     reqBeefChartData () {
       this.ajax({
         type: 'POST',
         url: 'malisk/client/echarts/getMtEcharts',
         success: res => {
           setTimeout(() => {
             this.$pcNProgress.done();
           }, 300);
           if (res.code === 200) {
             // this.$store.dispatch(' ', res.result);
             console.log('beef', res.result);
             this.upChartData(res.result);
           } else {
             this.errorTip(res.message);
           }
         }
       });
     }
   },
   watch: {
     options: {
       deep: true,
       handler: function () {
         this.renderMacroData();
       }
     }
   }
 };
 </script>
 <style lang="less" rel="stylesheet/less" scoped>
 .macroSection{
    box-sizing: content-box;
    width: 560px;
    height: 437px;
    padding: 0 10px;
    background: #1f2533;
    .macroHead{
      height: 34px;
      font-size: 14px;
      line-height: 34px;
    }
    .dataChart{
      width: 560px;
      height: 380px;
      border: 1px solid #303541;
      .contain{
        width: 520px;
        height: 318px;
        margin: 40px 20px 20px 20px;
        .chartView{
          width: 100%;
          height: 100%;
          // padding-left: 10px;

        }
      }

    }
  }
 </style>
